/* eslint-disable react/no-unused-state */
/* eslint-disable react/jsx-handler-names */
import { message, Form } from 'antd';
import uuid from 'es6-uuid';
import React from 'react';
import { ProductListC, PrimaryC } from '../../../components';

class ProductListDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      init: undefined,
      init1: undefined,
      init2: undefined,
      renderKey: uuid(16),
    };

    setTimeout(() => {
      this.setState({
        init: '00465f0f1ad94c5e93c2b6560c08c6c0',
        init1: ['021d124741a4406ea8bb618b130a8fed', '00465f0f1ad94c5e93c2b6560c08c6c0'],
        init2: ['1756b5407ab045ffa124e6d932c64a76', '1767c9924bd6458ca9031e985ff7c41a'],
      });
    }, 2000);
  }

  onClick = () => {
    // 通过form内部函数 变更表单数据时，不会进去到组件的钩子函数，所以无法处理tooltipz展示 所以加上key，变更key 来重新渲染
    // 因业务组件需要请求后端，所以不建议用这种方式变更，建议调用子组件的方法去更新数值setSelect；
    // this.setState({
    //   renderKey:uuid(16)
    // })
    this.formRef.current.setFieldsValue({
      productId4: ['021d124741a4406ea8bb618b130a8fed', '00465f0f1ad94c5e93c2b6560c08c6c0'],
    });
  };

  onClick1 = () => {
    // 建议用这种
    this.state.ProductListC1.setSelect(['021d124741a4406ea8bb618b130a8fed', '00465f0f1ad94c5e93c2b6560c08c6c0']);
  };

  onClick3 = (dataIndex) => {
    this.formRef.current.setFieldsValue({
      [dataIndex]: '021d124741a4406ea8bb618b130a8fed',
    });
  };

  onClick4 = () => {
    console.log(this.formRef.current.getFieldsValue());
  };

  render() {
    return (
      <Form ref={this.formRef} labelWrap={true}>
        <PrimaryC onClick={this.onClick4} title='获取所有表单数据' />
        <div style={{ padding: '20px', width: '800px' }}>
          <h2>单选，有初始化，数据源为组合根节点</h2>
          <ProductListC
            form={this.formRef.current}
            dataIndex='productId3'
            initialValue='00465f0f1ad94c5e93c2b6560c08c6c0'
            rules={[{ required: true, message: '请选择产品!' }]}
            helper='lalal'
            onRef={(ref) => this.setState({ ProductListC3: ref })}
            // onChange={(e) => console.log(e)}
          />
          <PrimaryC onClick={(e) => this.onClick3('productId3')} title='更换数据' style={{ margingRight: '20px' }} />
          <h2>单选，有初始化，数据源为组合根节点，初始值延迟</h2>
          <ProductListC
            form={this.formRef.current}
            dataIndex='productId31'
            initialValue={this.state.init}
            rules={[{ required: true, message: '请选择产品!' }]}
            helper='lalal'
            onChange={(e) => console.log(e)}
          />
          <h2>多选，有初始化，数据源为组合根节点，可外部更改数据</h2>
          <ProductListC
            form={this.formRef.current}
            dataIndex='productId4'
            initialValue={this.state.init1 || []}
            rules={[{ required: true, message: '请选择产品!' }]}
            helper='lalal'
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ ProductListC1: ref })}
            multiple={true}
            key={this.state.renderKey}
          />
          <PrimaryC onClick={this.onClick1} title='onRef更改数据-推荐' style={{ margingRight: '20px' }} />
          <PrimaryC onClick={this.onClick} title='this.formRef更改数据' />
          <h2>单选，数据源为产品节点</h2>
          <ProductListC form={this.formRef.current} dataIndex='productId5' rules={[{ required: true, message: '请选择产品!' }]} onChange={(e) => console.log(e)} dataType={2} />
          <h2>多选，有初始化，数据源为产品节点，可外部更改数据</h2>
          <ProductListC
            form={this.formRef.current}
            dataIndex='productId6'
            initialValue={this.state.init2}
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ ProductListC2: ref })}
            multiple={true}
            dataType={2}
          />
          <PrimaryC
            onClick={() => {
              this.state.ProductListC2.setSelect(['4de34cd9ed9740a9965b635bb2f51ef0', '4e28829f9e274508a32af7573ea83c25']);
            }}
            title='变更数据'
          />
          <h2>单选，数据源为产品节点，用于资产拆分，后台返回资产拆分中不包含的产品</h2>
          <ProductListC form={this.formRef.current} dataIndex='productId7' onChange={(e) => console.log(e)} dataType={3} />
          <h2>选择框隐藏时触发事件</h2>
          <ProductListC
            form={this.formRef.current}
            dataIndex='productId8'
            onDropdownVisibleChange={(open, value) => message.warning('已选项发生变化')}
            dataType={2}
            multiple={true}
          />
          <h2>单选，数据源为投资经理权限产品</h2>
          <ProductListC form={this.formRef.current} dataIndex='productId99' rules={[{ required: true, message: '请选择产品!' }]} onChange={(e) => console.log(e)} dataType={4} />
          <h2>单选，数据源为投资经理权限产品加模拟产品</h2>
          <ProductListC form={this.formRef.current} dataIndex='productId999' rules={[{ required: true, message: '请选择产品!' }]} onChange={(e) => console.log(e)} dataType={5} />
          <h2>单选，数据源为产品节点(设置交易模式)</h2>
          <ProductListC
            form={this.formRef.current}
            dataIndex='productId111'
            rules={[{ required: true, message: '请选择产品!' }]}
            onChange={(e) => console.log(e)}
            dataType={2}
            tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL']}
          />
          <h2>单选，数据源为产品节点(切换租户)</h2>
          {/* 租户切换 */}
          <ProductListC
            dataType={2}
            currentTenant={this.state.currentTenant}
            positionBody={true}
            form={this.formRef.current}
            dataIndex='productdataIndex'
            onChange={(e) => console.log(e)}
          />
          <PrimaryC
            onClick={() => {
              this.setState({
                currentTenant: 'XAYH',
              });
            }}
            title='变更租户'
          />
        </div>
      </Form>
    );
  }
}

export default ProductListDemo;
